<!--业务梳理--
	1、用户只能在“我创建”中看到用户自己创建的任务；
	2、用户只能在“我主责”中看到用户自己主责的任务；
	3、其他同理；
	按钮权限：
	1、只有在“进行中”状态，主责人、参与人才有“反馈按钮”；
	2、只有在“审批中”状态，且是“审批人”有“审核按钮”权限；
-->
<template>
<div class="page temporaryTask-page" data-page="temporaryTask" style="z-index: 2;">
    <div class="link-page-nav">
        <a href="#" class="link"  @click="$root.backToTab()">
            <i class="iconfont icon-zuo"></i>
        </a>
    </div>
    <div class="add-keyAlarm more-task-btn" @click="gotoCreate()">
		<i class="iconfont icon-weibiaoti--1"></i>
        <!-- <a href="" data-view=".view-main">
        	<i class="iconfont icon-weibiaoti--1"></i>
        </a> -->
    </div>
    <div class="link-page-top">
        <div class="link-page-list-title"><label id="list-title">临时任务</label></div>
        <div class="buttons-row" style="display:none">
			
		</div>
    </div>
    <div  style="width: 100%;height: 30px;position: absolute;z-index: 3;background-color: #fff;">
      <div style="margin: 0 20px;">
          <a href="#" class="checkApply-link active" @click="selectCurrentType(1)">我创建</a>
          <a href="#" class="checkApply-link" @click="selectCurrentType(2)">我主责</a>
          <a href="#" class="checkApply-link" @click="selectCurrentType(3)">我审核</a>
          <a href="#" class="checkApply-link" @click="selectCurrentType(4)">我参与</a>
          <a href="#" class="checkApply-link" @click="selectCurrentType(5)">知会我</a>
      </div> 
  </div>
	<div class="page-content infinite-scroll-content ptr-content pdbottom120" style="margin-top: 20px;"
        data-infinite-distance="50"  
        @infinite="loadMore" 
        @ptr:refresh="refreshMaintainList">
        <div class="ptr-preloader">
            <div class="preloader color-multi"></div>
            <div class="ptr-arrow"></div>
        </div>
        <div class="list media-list" style="padding-bottom: 50px;">
            <ul id="tempTask_dataList">
            </ul>
           <div id="dataList_preloader" class="preloader infinite-scroll-preloader"></div>
        </div>
  	</div>
</div>
  </div>
</template>
<style>
	.list ul:before,
	.list ul:after{
		height: 0 !important;
	}
</style>
<script>
    return {
        data: function () {
        	return {
				isHidden:false,
				pageSize: 25,//分页参数(每页显示条数)
	            pageIndex: 0,//分页参数
	            status : 0,//状态：1进行中 ，2：审核中，3：已完成，4：已过期，5：已撤回,0.全部
	            allowInfinite: true,
	            orgIds:"",//业主单位集合 多个逗号分隔
	            type:1,//类型：1:我创建 2：我主责 3：我审核 4：我参与 5：知会我
        	}
        },
        methods:{
			backToRefresh:function(){
				var self = this;
				self.reInit(true);
				self.getTempTaskList();
			},
        	gotoCreate : function (){
        		var self=this;
        		app.router.navigate("/createTemporaryTask/");
        	},
			slideCheck : function(){
				var self=this;
			    if(self.isHidden){//如果当前隐藏  
		         	$('.buttons-row').hide();
		         	self.isHidden=false;
		        }else{//否则  
		        	$('.buttons-row').show();
		        	self.isHidden=true;
		        }  
			},
			checkItem:function(){
				var self=this;
				$(".buttons-row").append(`
					<div class="checkItem">
					 	<input type="radio" id="radio0" value="0" checked="checked">
					 	<label  name="radio0" class="checked">进行中</label>
				 		<div class="point"></div>
				 	</div>
				 	<div class="checkItem">
					 	<input type="radio" id="radio1" value="1" >
					 	<label name="radio1">审核中</label>
					 	<div class="point"></div>
				 	</div>
				 	<div class="checkItem">
					 	<input type="radio" id="radio2" value="2">
					 	<label name="radio2">已完成</label>
					 	<div class="point"></div>
				 	</div>
				 	<div class="checkItem">
					 	<input type="radio" id="radio3" value="3">
					 	<label name="radio3">已过期</label>
					 	<div class="point"></div>
				 	</div>
				 	<div class="checkItem">
					 	<input type="radio" id="radio4" value="4">
					 	<label name="radio4">已撤回</label>
					 	<div class="point"></div>
				 	</div>
				`);
				 $('label').click(function(){
				    var radioId = $(this).attr('name');
				    $('label').removeAttr('class') && $(this).attr('class', 'checked');
				    $('input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
				    if($('#' + radioId).val()==0){
				    	$("#list-title").empty().html("进行中任务");
				    	self.status = 1;
				    }else if($('#' + radioId).val()==1){
				    	$("#list-title").empty().html("审核中任务");
				    	self.status = 2;
				    }else if($('#' + radioId).val()==2){
				    	$("#list-title").empty().html("已完成任务");
				    	self.status = 3;
				    }else if($('#' + radioId).val()==3){
				    	$("#list-title").empty().html("已过期任务");
				    	self.status = 4;
				    }else if($('#' + radioId).val()==4){
				    	$("#list-title").empty().html("已撤回任务");
				    	self.status = 5;
				    }
				    self.reInit();
	                self.getTempTaskList();
			    });
			}, 
			//点击不同类型
	        selectCurrentType:function(type){
	          if(getClickEnabel()){
	              let self = this;
	              let $ = self.$$;
	              self.type = type;
	              //选择框变色
	              $(".checkApply-link").removeClass('active').eq((type-1)).addClass('active');
	              $(".checkApply-page .tab-link-highlight").css("left",((type-1)==0?1:(type-1)*20)+"%");
	              self.reInit();
	              self.getTempTaskList();
	          }
	        },
	      	//获取作业任务列表
	        getTempTaskList:function(num){
	            var self = this;
	            $("#tempTask_dataList").empty();
	            Dao.getTempTaskList({
	            	userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    account:userInfor.accountName,
	                pageSize: self.pageSize,//分页参数(每页显示条数)
	                pageIndex:self.pageIndex,//分页参数
	                status:0,//状态：0：全部（默认），1进行中 ，2：审核中，3：已完成，4：已过期，5：已撤回
	                type: self.type, 
	            }, function (data,total) {
	                if (data && data.length > 0){
	                  if (self.pageSize * self.pageIndex + data.length < total) { //有分页
	                      $("#dataList_preloader").show();
	                      self.allowInfinite = true;
	                  } else {  //没分页
	                      $("#dataList_preloader").hide();
	                      self.allowInfinite = false;
	                  }
	                  for (var i=0;i<data.length;i++) {
	                    var approveStatus = data[i].status;
	                    var remainHtml="";
	                    if(approveStatus ==1){//状态：1进行中 ，2：审核中，3：已完成，4：已过期，5：已撤回
	                    	remainHtml=`<span style="color:#2471CA">进行中&nbsp;|&nbsp;`+isDay(data[i].remainingTime)+`</span>`;
	                    	if(data[i].dutyMan==userInfor.accountName || (data[i].partMan.indexOf(userInfor.accountName)>-1)){
	                    		remainHtml +=`<a href="/approveTask/1/`+data[i].orgId+`/`+data[i].id+`/temporaryTask/" data-view=".view-main"style="width: 80px;
    background: #2196f3;
    color: #fff;
    text-align: center;
    border-radius: 15px;
    margin: 20px 0 0 0;
    padding: 5px 0" >我要反馈 </a>`;
	                    	}
	                    }else if(approveStatus ==2){
	                    	remainHtml=`<span style="color:#2471CA">审核中&nbsp;|&nbsp;`+isDay(data[i].remainingTime)+`</span>`;
	                    	if(data[i].verifyMan==userInfor.accountName){
	                    		remainHtml+=`<a href="/approveTask/2/`+data[i].orgId+`/`+data[i].id+`/temporaryTask/" data-view=".view-main"  style="width: 80px;
    background: #2196f3;
    color: #fff;
    text-align: center;
    border-radius: 15px;
    margin: 20px 0 0 0;
    padding: 5px 0">我要审核 </a>`;
	                    	}
	                    }else if(approveStatus ==3){
	                    	remainHtml=`<span style="color:#2471CA">于`+moment(data[i].updateTime).format("YYYY/MM/DD")+`完成</span>`;
	                    }else if(approveStatus ==4){
	                    	remainHtml=`<span style="color:#E07762">逾期未完成</span>`;
	                    }else if(approveStatus ==5){
	                    	remainHtml=`<span style="color:#E07762">已撤回</span>`;
	                    }
                      $("#tempTask_dataList").append(`
                    		  <li style="overflow:hidden">
                              <a href="/TemporaryTaskDetail/`+data[i].id+`/" class="item-link item-content" data-view=".view-main">
                                <div class="temp-item-inner">
                                  <div class="item-title-row">`+data[i].content+`</div>
                                  <div class="item-subtitle">业主单位<label id="orgNameView">`+data[i].orgName+`</label></div>
                                  <div class="item-subtitle">责&nbsp;&nbsp;任&nbsp;&nbsp;人<label>`+data[i].dutyManName+`</label></div>
                                </div>
                              </a>
                              <div class="decter-stuts-con"  style="height:initial;line-height:initial;padding:7px 15px;    overflow: hidden;">
          	                	`+remainHtml+`
                              </div>
                         </li>`);
	                  }
	                }else{
	                  self.allowInfinite = false;
	                  $("#dataList_preloader").hide();
	                  //暂无数据
	                  if (self.pageIndex == 0) {
	                      $("#tempTask_dataList").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
	                  }
	                }
	            });
	        },
	        loadMore:function(){
	            var self = this;
	            if (!self.allowInfinite) return;
	              self.allowInfinite = false;
	            setTimeout(function () {
	              self.pageIndex++;
	              self.getTempTaskList();
	              self.allowInfinite = true;
	            }, 1000);
	          },
	          reInit:function(loadMoreFalg){
	              var self = this;
	              self.pageIndex = 0;
	              $(".temporaryTask-page .page-content").scrollTop(0,300);
	              $("#tempTask_dataList").empty();
	              if(!self.allowInfinite && !loadMoreFalg){
	                  self.allowInfinite = true;
	                  $('#dataList_preloader').show();
	              }
	          },
	          refreshMaintainList: function (e, done) {
	              if (done && e) {
	                  var self = this;
	                  var $ = self.$$;
	                  setTimeout(function () {
	                      self.reInit();
	                      $('#dataList_preloader').hide();
	                      self.getTempTaskList();
	                      done();
	                  }, 1000);
	              }
	          },
	          refreshCurrentLevel : function(){
	        	  var self = this;
                  var $ = self.$$;
	        	  self.reInit();
	              self.getTempTaskList();
	          },
        },
        on: {
        	pageInit: function (e, page) {
                var self = this;
                self.reInit();
                //列表
                self.getTempTaskList();
                self.checkItem();
    		},
    		
        }
      }
</script>